<!--复选框-->
<template>
  <div class="tableClass p20">
    <table cellspacing="0">
      <tr>
        <th>1) button</th>
      </tr>
      <tr>
        <td>
          <button class="button-block">样式一</button>
          <button class="button-line">样式二</button>
          <button class="button-lc">样式四</button>
          <button class="button-lb">样式五</button>
          <button class="button-lr">样式六</button>
        </td>
      </tr>
      <tr>
        <th>2) input</th>
      </tr>
      <tr>
        <td>
          <input class="input-l" value="样式一">
          <input class="input-b" value="样式三">
          <input class="input-n120" value="样式二">
        </td>
      </tr>
      <tr>
        <th>3) box</th>
      </tr>
      <tr>
        <td>
          <div class="inline mt10">行内元素</div>
          <div class="block mt10">块级元素</div>
          <div class="border mt10">线框</div>
          <div class="border-left mt10">左线框</div>
          <div class="border-right mt10">右线框</div>
          <div class="border-bottom mt10">底部线框</div>
          <div class="border-bottom-dashed mt10">底部虚线框</div>
        </td>
      </tr>
      <tr>
        <th>4) 表格</th>
      </tr>
      <tr>
        <td class="table">
          <table>
            <tr>
              <th>1</th>
              <td>2</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th>5) 其它</th>
      </tr>
      <tr>
        <td>
          <div class="shadow" style="height: 30px; width:100px">阴影  shadow</div>
          <div class="disabled mt10" style="height: 30px; width:200px">不能选择  disabled</div>
          <div class="un-select mt10" style="height: 30px; width:200px">不能选中  un-select</div>
          <div class="pointer mt10" style="height: 30px; width:200px">能交互样式  pointer</div>
          <p class="tableP"><span>竖线</span></p>
          <p class="tableBigP"><span>大竖线</span></p>
        </td>
      </tr>
      <tr>
        <th>6) 定位</th>
      </tr>
      <tr>
        <td>
          <pre>{{position}}</pre>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        position: `.left {
  float: left;
}
.right{
  float: right;
}
.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
//字体定位
.t-right{
  text-align: right;
}
.t-center{
  text-align: center;
}
.t-left{
  text-align: left;
}
.v-bottom{
  vertical-align: text-bottom;
}
.v-top{
  vertical-align: top;
}
.v-middle{
  vertical-align: middle;
}`
      }
    }
  }
</script>
